<!--
 * @Author: linj
 * @Email: 993353454@qq.com
 * @Date: 2020-06-28 17:04:15
 * @Description: 组件数据配置
-->
<template>
  <transition name="fade">
    <div class="c-edit-com of-a"
      v-show="show">
      <div class="title b fs-16"
        @click="$emit('hideClick','updateComData',false)">工具栏</div>
      <!-- <div>{{toFixed(9.999)}}</div> -->
      <template v-if="item.edit">
        <div class="pd-f10">
          <div>
            <div class="pd-tb10">数据：</div>
            <div v-for="(sty,index) in item.edit.data"
              :key="index">
              <div>{{sty.name}}</div>
              <el-input v-model="sty.value"></el-input>
            </div>
          </div>
          <div>
            <div class="pd-tb10">样式：</div>
            <div v-for="(sty,index) in item.edit.style"
              :key="index">
              <div>{{sty.name}}</div>
              <el-input v-model="sty.value"></el-input>
            </div>
          </div>
          <div class="mg-t10">
            <el-button type="primary"
              @click="$emit('updateComData',item)">保存</el-button>
          </div>
        </div>
        {{d}}
        <div>----------------</div>
        {{d.dragC}}
        {{d.show}}
        <div>----------------</div>
        <div v-if="d.item.dragC">
          <el-input v-model="d.item.dragC.x"></el-input>
        </div>
        <div>--</div>
        {{props.item.dragC}}
      </template>
    </div>
  </transition>
</template>

<script setup>
import { sleep } from "lj-utils/j"
import { reactive, ref, watch } from "vue-demi"
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  item: {
    type: Object,
    default() {
      return {}
    }
  }
})
const d = ref(props)
// watch({
//   'item': {
//     handler: (n, o) => {
//       console.error('-------------------watch------------')
//       console.error(n, o)
//       d.value = n
//     },
//     deep: true
//   }
// })
watch([() => props.item], [(n, o) => {
  console.error('-------------------watch------------')
  console.error(n, o)
}])
defineEmits(['hideClick', 'updateComData'])

async function test() {
  await sleep(2000)
  console.error('调用了子组件函数', props.item)
  return 'sb'
}
defineExpose({
  test
})
</script>
<style scoped lang="scss">
.c-edit-com {
  // position: absolute;
  // top: 0;
  // right: 0;
  // bottom: 0;
  box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.05);
  width: 400px;
  background-color: #fff;
  .title {
    padding: 10px;
    background: rgb(236, 236, 236);
  }
}
</style>
